<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
import { ref, watchEffect } from 'vue'

// 数据
let temp = ref(0)
let height = ref(0)

// 方法
function changeTemp() {
  return (temp.value += 10)
}
function changeHeight() {
  return (height.value += 10)
}

// // 监视watch实现
// watch([temp, height], (value) => {
//   // console.log(value)
//   // 解构赋值。从value中获取到最新的水温newTemp，最新的水位newHeight
//   let [newTemp, newHeight] = value
//   if (newTemp >= 60 || newHeight >= 80) {
//     console.log('给服务器发请求', newTemp, newHeight)
//   }
// })

// 使用 watchEffect 进行监视
/**
 * 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
 *    - 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。
 *    - watch：要明确指出监视的数。
 *    - watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
 */
let stopWtach = watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log('给服务器发请求', temp.value, height.value)
  }
  // 水温达到100，或水位达到50，取消监视
  if (temp.value === 100 || height.value === 50) {
    console.log('清理了')
    stopWtach()
  }
})
</script>

<template>
  <div class="person">
    <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
    <h2>当前水温：{{ temp }} ℃</h2>
    <h2>当前水位：{{ height }} cm</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
